ComponentOne Basic Library for UWP
Basic Library Overview / RangeSlider for UWP / RangeSlider Features / Thumb Values and Range
In This Topic
    Thumb Values and Range
    In This Topic

    The C1RangeSlider's value range is determined by the difference between the UpperValue property and the LowerValue property. These two properties are connected to the thumbs used to select the range of values:

    Setting the Thumb Values

    The C1RangeSlider control includes two thumbs for selecting a range of values. The UpperValue and the LowerValue thumbs move along the slider track. By default, the UpperValue property is set to 100 and the LowerValue property is set to 0.

    Using one of the following methods, you can customize the thumb values.

    To set the UpperValue and LowerValue properties add UpperValue="90" LowerValue="10" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

    XAML
    Copy Code 
    <Xaml:C1RangeSlider Name="C1RangeSlider1" Width="26" Height="18" UpperValue="90" LowerValue="10" />

     

    For example, to set the UpperValue and LowerValue properties add the following code to your project:

    Visual Basic
    Copy Code 
    Me.C1RangeSlider1.LowerValue = 10
Me.C1RangeSlider1.UpperValue = 90

     

    C#
    Copy Code 
    this.c1RangeSlider1.LowerValue = 10;
this.c1RangeSlider1.UpperValue = 90;

    To set the UpperValue and LowerValue properties at Design time, complete the following steps:

    1. Click the C1RangeSlider control once to select it.
    2. Navigate to the Properties window, and enter a number, for example "10", in the text box next to the LowerValue property.
    3. Still in the Properties window, enter a number, for example "90", in the text box next to the UpperValue property.

    This will set the UpperValue and LowerValue properties to the values you chose.

    Setting the ValueChange Property

    The ValueChange property determines by what value the UpperValue and the LowerValue thumbs move along the slider track when the track is clicked, note that if the tack is clicked between the UpperValue and LowerValue thumbs (in the range) the thumbs will not move.

    The UpperValue property cannot be less than the Maximum property and the LowerValue cannot be less than the Minimum property.

    Using any of the following methods, when you click the track of the C1RangeSlider control, the closest thumb will move by 5 units.

    To set the ValueChange property add ValueChange="5" to the <Xaml:C1RangeSlider> tag so that it appears similar to the following:

    XAML
    Copy Code 
    <Xaml:C1RangeSlider Name="C1RangeSlider1" Height="18" Width="26" ValueChange="5" />

    To set the ValueChange property add the following code to your project:

    Visual Basic
    Copy Code 
    Me.C1RangeSlider1.ValueChange = 5

     

    C#
    Copy Code 
    this.c1RangeSlider1.ValueChange = 5;

    To set the ValueChange property at Design time, complete the following steps:

    1. Click the C1RangeSlider control once to select it.
    2. Navigate to the Properties window and enter a number, for example "5", in the text box next to the ValueChange property.

    This will set the ValueChange property to the value you chose.